<!-- 这是商品页 -->
<template>
  <div id="app">

    <template>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">全部</el-menu-item>
        <el-submenu index="2">
          <template slot="title">花期</template>
          <el-menu-item index="2-1">花期倒叙</el-menu-item>
          <el-menu-item index="2-2">花期正序</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">颜色</template>
          <el-menu-item index="3-1">红色系花卉</el-menu-item>
          <el-menu-item index="3-2">黄色系花卉</el-menu-item>
          <el-menu-item index="3-3">白色系花卉</el-menu-item>
          <el-menu-item index="3-4">蓝色系花卉</el-menu-item>
          <el-menu-item index="3-5">紫色系花卉</el-menu-item>
          <el-menu-item index="3-6">多彩混合</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">养护难度</template>
          <el-menu-item index="4-1">新手友好型</el-menu-item>
          <el-menu-item index="4-2">中等维护需求</el-menu-item>
          <el-menu-item index="4-3">高级养护需求</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">特殊属性</template>
          <el-menu-item index="5-1">吸附甲醛花卉</el-menu-item>
          <el-menu-item index="5-2">抗污染花卉</el-menu-item>
          <el-menu-item index="5-3">耐阴花卉</el-menu-item>
          <el-menu-item index="5-4">耐旱花卉</el-menu-item>
          <el-menu-item index="5-5">耐寒花卉</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">文化或节日</template>
          <el-menu-item index="6-1">圣诞节花卉</el-menu-item>
          <el-menu-item index="6-2">情人节花卉</el-menu-item>
          <el-menu-item index="6-3">新年花卉</el-menu-item>
          <el-menu-item index="6-4">其他传统节日花卉</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">寓意</template>
          <el-menu-item index="7-1">爱情与浪漫</el-menu-item>
          <el-menu-item index="7-2">友谊与感谢</el-menu-item>
          <el-menu-item index="7-3">祝福与好运</el-menu-item>
          <el-menu-item index="7-4">长寿与健康</el-menu-item>
          <el-menu-item index="7-5">荣誉与成就</el-menu-item>
          <el-menu-item index="7-6">纪念与哀悼</el-menu-item>
          <el-menu-item index="7-7">家庭与亲情</el-menu-item>
        </el-submenu>
        <el-submenu index="8">
          <template slot="title">盆栽</template>
          <el-menu-item index="8-1">爱情与浪漫</el-menu-item>
          <el-menu-item index="8-2">友谊与感谢</el-menu-item>
          <el-menu-item index="8-3">祝福与好运</el-menu-item>
          <el-menu-item index="8-4">长寿与健康</el-menu-item>
          <el-menu-item index="8-5">荣誉与成就</el-menu-item>
          <el-menu-item index="8-6">纪念与哀悼</el-menu-item>
          <el-menu-item index="8-7">家庭与亲情</el-menu-item>
        </el-submenu>
      </el-menu>
    </template>

    <main class="main">
      <section class="column" v-for="(flower, index) in tableData" :key="index">
        <div class="card">
          <div class="img" @click="clickflowers(flower.flowerId)">
            <img :src="flower.flowerPhoto" :alt="flower.name">
          </div>
          <div class="text">
            <div class="flower-name">{{ flower.name }}</div>
            <div class="flower-info">
              <i class="el-icon-date"></i>
              <span>花期: {{ formatBloomPeriod(flower.bloomPeriod) }}</span>
            </div>
            <div class="flower-info">
              <i class="el-icon-sunny"></i>
              <span>季节: {{ flower.season }}</span>
            </div>
            <div class="flower-info">
              <i class="el-icon-star-off"></i>
              <span>{{ flower.menaning }}</span>
            </div>
            <div class="tags-container">
              <span class="tag" v-if="flower.color">{{ flower.color }}</span>
              <span class="tag" v-if="flower.category">{{ flower.category }}</span>
              <span class="tag" v-if="flower.specialAttribute">{{ flower.specialAttribute }}</span>
            </div>
            <p class="price">￥{{ flower.price.toFixed(2) }}</p>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [],
      activeIndex: '1',
    }
  },
  created() {
    // 在组件创建时立即处理路由参数
    this.handleRouteParams();
  },
  methods: {
    handleRouteParams() {
      // 获取URL参数
      const urlParams = new URLSearchParams(window.location.search);
      const color = urlParams.get('color');
      const type = urlParams.get('type');
      
      if (color) {
        this.activeIndex = color;
        // 构造正确的keypath参数，例如：3,3-3
        const parentKey = color.split('-')[0]; // 获取父级key，例如：3
        const keypath = `${parentKey},${color}`; // 构造完整keypath
        
        this.request.get("/flowers", {
          params: {
            keypath: keypath
          }
        }).then(response => {
          console.log("获取颜色分类数据成功:", response.data);
          this.tableData = response.data;
        }).catch(error => {
          console.error('获取颜色分类数据失败:', error);
          this.load();
        });
      } else if (type) {
        let keypath;
        let parentKey;
        switch(type) {
          case 'male':
            parentKey = '4';
            keypath = '4-1';
            break;
          case 'female':
            parentKey = '4';
            keypath = '4-2';
            break;
          case 'love':
            parentKey = '7';
            keypath = '7-1';
            break;
          case 'visit':
            parentKey = '7';
            keypath = '7-2';
            break;
          default:
            this.load();
            return;
        }
        this.activeIndex = keypath;
        // 构造完整的keypath
        const fullKeypath = `${parentKey},${keypath}`;
        
        this.request.get("/flowers", {
          params: {
            keypath: fullKeypath
          }
        }).then(response => {
          console.log("获取类型分类数据成功:", response.data);
          this.tableData = response.data;
        }).catch(error => {
          console.error('获取类型分类数据失败:', error);
          this.load();
        });
      } else {
        this.load();
      }
    },
    load() {
      this.request.get("/flowers/list").then(res => {
        console.log("加载所有花卉数据:", res.data);
        this.tableData = res.data;
      }).catch(error => {
        console.error('加载数据失败:', error);
        this.$message.error('加载数据失败');
      });
    },
    clickflowers(id) {
      this.$router.push(`/flowersdetail/${id}`);
    },
    handleSelect(key, keyPath) {
      console.log("选择的分类:", key, keyPath);
      // 更新URL参数但不刷新页面
      const newUrl = new URL(window.location.href);
      if (key.startsWith('3-')) {
        newUrl.searchParams.set('color', key);
      } else {
        newUrl.searchParams.set('type', key);
      }
      window.history.pushState({}, '', newUrl);

      this.request.get("/flowers", {
        params: {
          keypath: keyPath.join(',')
        }
      })
      .then(response => {
        console.log("获取分类数据成功:", response.data);
        this.tableData = response.data;
      })
      .catch(error => {
        console.error('获取分类数据失败:', error);
        this.$message.error('获取分类数据失败');
      });
    },
    formatBloomPeriod(period) {
      if (!period) return '暂无';
      try {
        const dates = period.split(' - ');
        const start = new Date(dates[0]);
        const end = new Date(dates[1]);
        return `${start.getMonth() + 1}月${start.getDate()}日 - ${end.getMonth() + 1}月${end.getDate()}日`;
      } catch (e) {
        return period;
      }
    }
  }
}
</script>

<style scoped>
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  height: 100vh;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  margin-left: 15px;
  border-radius: 10px;
  background-color: white;
}


.main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  padding: 10px;
  overflow-y: auto;
}

.column {
  padding: 5px;
}

.card {
  background-color: white;
  padding: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-color: #1890ff;
}

.img {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.text {
  padding: 8px 0;
  text-align: left;
}

.flower-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flower-info {
  font-size: 13px;
  color: #666;
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.price {
  font-size: 18px !important;
  color: #ff4d4f !important;
  font-weight: 600 !important;
  margin: 8px 0 !important;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background-color: #f0f2f5;
  color: #666;
}

.el-menu-demo {
  background-color: rgb(245, 246, 247);
  /* 轻微的灰色 */
}
</style>